import React from 'react';
import { Input } from 'antd';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import css from './index.less';

@observer
export default class ToLink extends React.Component {

  static propTypes = {
    actionDetail: PropTypes.any,
    onChange: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      value: props.actionDetail,
    };
  }

  componentDidMount() {
  }

  render() {
    const { actionDetail, onChange } = this.props;
    const props = {
      addonBefore: 'https://',
      defaultValue: actionDetail,
      value: this.state.value,
      onChange: (e) => {
        this.setState({
          value: e.target.value,
        });
        onChange(e.target.value);
      },
    };
    return (
      <div className={css.box}>
        <div className={css.title}>请输入跳转链接地址:</div>
        <Input {...props} />
        <div className={css.tips}>
          <div>注意：</div>
          <div>手淘里只允许跳转淘系域名链接地址，但是微信里不允许打开淘系域名链接地址。</div>
        </div>
      </div>
    );
  }
}
